<template>
  <view class="flying-hand-details">
    <view class="user-information">
      <up-image
        :show-loading="true"
        shape="circle"
        :src="userInfo.url"
        width="80px"
        height="80px"
      ></up-image>
      <text class="user-name">{{ userInfo.userName }}</text>
      <text class="address">{{ userInfo.address }}</text>
      <view class="user-footer">
        <up-icon name="phone" size="20"></up-icon>
        <text class="phone">{{ userInfo.phone }}</text>
        <up-image
            width="30px"
            height="30px"
            class="u-page__item__slot-icon"
            :src="`../../static/assets/img/phone.png`"
          ></up-image>
      </view>
    </view>
    <view class="points-content">
      <view class="line-progress">
        <view class="points">
          <up-image
            width="30px"
            height="30px"
            class="u-page__item__slot-icon"
            :src="`../../static/assets/img/medal.png`"
          ></up-image>
          <view class="points-text">
            <text>{{ userInfo.vip }}</text>
            <text>{{ userInfo.points }}</text>
          </view>
        </view>
        <view class="progress-text">
          <up-line-progress
            :percentage="percentage"
            activeColor="#1677ff"
            :showText="false"
            height="15"
          ></up-line-progress>
          <text>{{ `${(userInfo.percentage * 100).toFixed(0)}%` }}</text>
        </view>
      </view>
    </view>
    <view class="points-content points-model">
      <view v-for="(item, index) in modelList" :key="index" class="item-model">
        <text>{{ item.value }}</text>
        <text>{{ item.label }}</text>
      </view>
    </view>
    <view class="points-content evaluate">
      <text>评价</text>
      <text>共{{ evaluateList.length }}条</text>
    </view>
    <!-- <view class="points-content">
      <up-empty
        v-if="!evaluateList.length"
        mode="message"
        icon="http://cdn.uviewui.com/uview/empty/message.png"
      >
      </up-empty>
    </view> -->
  </view>
  <view class="flying-footer">
    <view class="button">
      <up-button
        type="primary"
        color="#0052d9"
        text="留言"
        @click="setMessage"
      ></up-button>
    </view>
  </view>
  <up-modal :show="showModel" title="留言" :showConfirmButton="false">
    <view class="slot-modal">
      <up-textarea
        v-model="dataInfo.message"
        placeholder="请输入内容(最多200字)"
      ></up-textarea>
      <view class="rate">
        <text>评分：</text>
        <up-rate
          v-if="showModel"
          :count="5"
          size="20"
          minCount="-"
          activeColor="#fdcf0b"
          v-model="dataInfo.rate"
        ></up-rate>
      </view>
      <view class="modal-footer">
        <view class="upbutton"
          ><up-button text="取消" shape="circle" @click="confirm(0)"></up-button
        ></view>
        <view class="upbutton" @click="confirm(1)"
          ><up-button
            type="primary"
            text="确定"
            shape="circle"
            color="#4d80f0"
          ></up-button
        ></view>
      </view>
    </view>
  </up-modal>
</template>
<script setup lang="ts">
const userInfo = ref<any>({
  url: `https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626`,
  userName: "leisureman",
  address: "山西省 长治市 上党区",
  phone: "17607836233",
  vip: "黄金",
  points: "250积分",
  percentage: "0.66",
});
const showModel = ref<any>(false);
const evaluateList = ref<any>([]);
const modelList = [
  {
    label: "接单数量",
    value: 1,
    id: 1,
  },
  {
    label: "发帖数量",
    value: 1,
    id: 2,
  },
  {
    label: "评价数量",
    value: 1,
    id: 3,
  },
];
const dataInfo = ref<any>({
  rate: 0,
});
const confirm = (index: Number) => {
  console.log(showModel.value);
  console.log("dataInfo", dataInfo.value);
  showModel.value = false;
};
const setMessage = () => {
  showModel.value = true;
  dataInfo.value = {};
};

const percentage = computed(() => {
  return Number(userInfo.value.percentage) * 100;
});
</script>
<style lang="scss" scoped>
.flying-hand-details {
  background: linear-gradient(to bottom, #f1f7ff, white);
  .user-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    .user-name {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      padding: 5px 0;
    }
    .address {
      color: #6b7280;
    }
    .phone {
      padding: 0 10px;
    }
    .user-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
    }
  }
  .points-content {
    // padding: 0 20px 20px 20px;
    padding: 0 20px 10px 20px;
    .line-progress {
      padding: 20px 10px;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      .points {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 15px;
        .icon-img {
          margin-right: 10px;
        }
        .points-text {
          display: flex;
          flex-direction: column;
          text {
            &:first-child {
              font-weight: 600;
              color: #374151;
            }
            &:last-child {
              font-size: 14px;
              color: #6b7280;
            }
          }
        }
      }
      .progress-text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          padding-left: 10px;
        }
      }
    }
    &.points-model {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 -10px;
      .item-model {
        margin: 0 10px;
        width: 30.3333%;
        border-radius: 6px;
        padding: 10px;
        background-color: #eff6ff;
        display: flex;
        flex-direction: column;
        align-items: center;
        text {
          &:nth-child(1) {
            font-weight: bold;
            color: #2563eb;
          }
          &:nth-child(2) {
            color: #6b7280;
            font-size: 14px;
          }
        }
      }
    }
    &.evaluate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text {
        &:nth-child(1) {
          font-weight: bold;
          color: #333333;
          font-size: 18px;
        }
        &:nth-child(2) {
          color: #6b7280;
          font-size: 14px;
        }
      }
    }
  }
  .icon-img {
    width: 30px;
    height: 30px;
  }
}
.flying-footer {
  border-top: 1px solid #e5e7eb;
  position: fixed;
  padding: 20px;
  bottom: 85px;
  width: calc(100% - 40px);
}

.slot-modal {
  width: 100%;
  display: flex;
  flex-direction: column;
  .rate {
    display: flex;
    margin: 10px 0;
  }
  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px -10px 0px -10px;
    .upbutton {
      margin: 0 10px;
      width: 50%;
    }
  }
}
</style>
